<template>
	<view class="pageWrapper">
		<input class="iptBox" type="text" v-model="code" placeholder="请输入卡密">
		<view class="submitBtn flex flex-all-center" @click="sendReq">
			确认兑换
		</view>

		<!-- 弹窗 -->
		<u-popup :show="dialogStatus" @close="close" @open="open" mode="bottom">
			<view class="dialogWrapper flex flex-column flex-align-center">
				<view class="">
					你要兑换的是【1年VIP】
				</view>
				<view class="">
					确认是现在兑换吗？
				</view>
				<view class="btnArea flex flex-between">
					<view class="cancelBtn flex-all-center" @click="dialogStatus = false">
						暂不兑换
					</view>
					<view class="confirmBtn flex-all-center" @click="confirm">
						确认兑换
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import api from '@/api/api.js'
	export default {
		data() {
			return {
				dialogStatus: false,
				code:''
			}
		},
		methods: {
			sendReq() {
				this.dialogStatus = true
			},
			open() {

			},
			close() {
				this.dialogStatus = false
			},
			confirm() {
				var token = uni.getStorageSync('AUTH_TOKEN')
				api.useCard(token,{cardNo:this.code}).then(res=>{
						uni.$u.toast('兑换成功');
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
				})
				this.dialogStatus = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-popup__content {
		padding: 96rpx 100rpx 0;
		border-radius: 24rpx 24rpx 0 0;
		overflow: hidden;
	}
	.pageWrapper {
		padding: 40rpx 40rpx 0;

		.iptBox {
			box-sizing: border-box;
			padding: 0 24rpx;
			height: 100rpx;
			line-height: 100rpx;
			background: #EEF7FC;
			text-align: center;
			border-radius: 50rpx;
		}

		.submitBtn {
			margin-top: 50rpx;
			height: 90rpx;
			background: #03A2EC;
			color: #FFF;
			border-radius: 50rpx;
		}
	}

	.dialogWrapper {
		.btnArea {
			margin-top: 64rpx;
			width: 100%;

			.cancelBtn,
			.confirmBtn {
				box-sizing: border-box;
				width: 234rpx;
				height: 80rpx;
				border-radius: 40rpx;
			}

			.cancelBtn {
				color: #282828;
				border: 1rpx solid #707070;
			}

			.confirmBtn {
				color: #FFF;
				background: #03A2EC;
			}
		}
	}
</style>